<script>
import http_config from "@/config/http";

export default {
  name: "uploads",
  props: {
    imgList : {
      type : Array,
      default(){
        return [];
      }
    }
  },
  data(){
    return {
      baseApiUrl: http_config.base_url,
      maxLength: 9

    }
  },
  methods: {
    ViewImage(e) {
      let imgList = this.imgList;
      for(let i=0;i<imgList.length;i++){
        imgList[i] = this.$xyfun.image(imgList[i])
      }
      console.log(imgList)
      uni.previewImage({
        urls: imgList,
        current: e.currentTarget.dataset.key
      });
    },

    ChooseImage() {
      var that=this;
      let user = uni.getStorageSync("xykeep:user");
      let userToken = user.token;
      uni.chooseImage({
        count: this.maxLength-this.imgList.length,
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], //从相册选择
        success: (res) => {
          const tempFilePaths = res.tempFilePaths;

          for(var i=0; i<tempFilePaths.length; i++){
            uni.uploadFile({
              url: that.baseApiUrl + '/addons/alioss/index/upload',
              filePath: tempFilePaths[i],
              fileType: 'image',
              name: 'file',
              headers: {
                'Accept': 'application/json',
                'Content-Type': 'multipart/form-data',
                'token': userToken
              },
              formData: {},
              success: (uploadFileRes) => {
                var dataimg=JSON.parse(uploadFileRes.data);

                if(!dataimg.data.url){
                  this.$xyfun.msg('有文件上传失败');
                }else {
                  that.imgList.push(dataimg.data.url);
                  this.$emit("chooseFile",this.imgList)
                }
              },
              fail: (error) => {
                if (error && error.response) {
                  this.$xyfun.msg(error.response);
                }
              },
              complete: () => {
                setTimeout(function () {
                  uni.hideLoading();
                }, 250);
              },
            });
          }


        }
      });
    },

    DelImg(e) {
      var index=e.currentTarget.dataset.index
      uni.showModal({
        title: '删除图片',
        content: '确定要删除这张图片吗？',
        cancelText: '取消',
        confirmText: '删除',
        success: res => {
          if (res.confirm) {
            this.imgList.splice(index, 1)
            this.$emit("chooseFile", this.imgList);
          }
        }
      })
    },
  }
}
</script>

<template>
  <view class="upload_photos">
    <view class="photos">
      <view class="ps" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-key="index" :data-url="imgList[index]">
        <image :src="$xyfun.image(imgList[index])"></image>
        <view class="del" @tap.stop="DelImg" :data-index="index">+</view>
      </view>
      <view class="select_pic" @tap="ChooseImage" v-if="imgList.length<maxLength">+</view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.upload_photos{
  .photos{
    display: flex;
    margin-top: 80rpx;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    padding-bottom: 10rpx;
    .ps{
      width: 170rpx;
      height: 170rpx;
      background: #f2f2f2;
      margin-right: 20rpx;
      margin-bottom: 30rpx;
      position: relative;
      image{
        border-radius: 14rpx;
        width: 170rpx;
        height: 170rpx;
      }
      .del{
        position: absolute;
        top: -4rpx;
        right: -4rpx;
        text-align: center;
        box-sizing: border-box;
        width: 30rpx;
        height: 30rpx;
        line-height: 28rpx;
        background: red;
        border-radius: 15rpx;
        color: #fff;
        transform: rotate(45deg);
      }
    }
    .select_pic{
      width: 140rpx;
      height: 140rpx;
      text-align: center;
      line-height: 140rpx;
      font-size: 50rpx;
      border: 1rpx dashed #555;
      border-radius: 14rpx;
      box-sizing: border-box;
    }
  }
}
</style>